<template>
  <div
    class="home"
    @click="hidden"
    :style="{ backgroundImage: 'url(' + imgSrc + ')' }"
  >
    <ul class="nav">
      <li
        @dblclick="showModal = true"
        @click.stop="change(0)"
        :class="{ active: flag == 0 }"
      >
        <img src="../../public/05.jpg" alt="" />
        <p>换皮肤</p>
      </li>
      <li @click.stop="change(1)" :class="{ active: flag == 1 }">
        <img src="../../public/05.jpg" alt="" />
        <p>浏览器</p>
      </li>
    </ul>
    <div class="menu" @click.stop="showMenu = true" v-show="showMenu"></div>
    <footer class="footer">
      <img src="../../public/05.jpg" alt="" @click.stop="showMenu = true" />
    </footer>

    <my-modal v-model="showModal">
      <template #title>
        <h3>换皮肤</h3>
      </template>
      <template #con>
        <div
          class="model-con"
          :style="{ backgroundImage: 'url(' + imgSrc + ')' }"
        >
          <ul>
            <li @click="imgSrc = '01.jpg'">
              <img src="../../public/01.jpg" alt="" />
            </li>
            <li @click="imgSrc = '02.jpg'">
              <img src="../../public/02.jpg" alt="" />
            </li>
            <li @click="imgSrc = '03.jpg'">
              <img src="../../public/03.jpg" alt="" />
            </li>
          </ul>
        </div>
      </template>
    </my-modal>
  </div>
</template>

<script>
import myModal from "../components/myModal.vue";
export default {
  data() {
    return {
      showMenu: false,
      flag: -1,
      imgSrc: "01.jpg",
      showModal: false,
    };
  },
  methods: {
    change(i) {
      this.flag = i;
    },
    hidden() {
      this.showMenu = false;
      this.flag = -1;
    },
  },
  components: {
    myModal,
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
}
.footer {
  width: 100%;
  height: 80px;
  background: blue;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  img {
    width: 60px;
    height: 60px;
  }
}
.nav {
  width: 100px;
  margin: 20px;
  li {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100px;
    justify-content: center;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
    }
  }
  .active {
    background: rgba(0, 0, 0, 0.3);
  }
}
.menu {
  width: 200px;
  height: 200px;
  background: pink;
  position: fixed;
  left: 0;
  bottom: 80px;
}
.model-con {
  position: relative;
  height: 250px;
  background-size: 100% 100%;
  ul {
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;

    li {
      flex: 1;
      height: 100%;
      border: 1px solid red;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
